<.live_component
  module={Electric.PhoenixExampleWeb.TodoLive.FormComponent}
  id={@todo.id || :new}
  action={:new}
  todo={@todo}
/>

<div class={["relative flex justify-center items-top"]}>
  <div class={[
    if(@electric_live, do: "hidden"),
    "absolute w-1/4 z-50 top-10 text-center bg-violet-800/75 inline-flex justify-center rounded"
  ]}>
    <div class="inline-flex items-center py-2 text-white">
      <svg
        class="animate-spin -ml-1 mr-3 h-5 w-5"
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
      >
        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
        </circle>
        <path
          class="opacity-75"
          fill="currentColor"
          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
        >
        </path>
      </svg>
      <span class="text-white">Loading&hellip;</span>
    </div>
  </div>
  <div class={[if(!@electric_live, do: "opacity-0"), "grow items-top"]}>
    <div class="overflow-y-auto px-4 sm:overflow-visible sm:px-0">
      <div class="flex flex-col md:container md:mx-auto sm:mx-auto mt-11 sm:w-full">
        <div
          id="todos"
          phx-update="stream"
          class="flex flex-col relative divide-y divide-zinc-100 border-t border-b border-zinc-200 text-sm leading-6 text-zinc-700"
        >
          <div
            :for={{id, todo} <- @streams.todos}
            id={id}
            class="flex flex-row justify-center items-center space-x-4 group hover:bg-zinc-50 hover:cursor-pointer todo-item"
            phx-mounted={
              if @animate_insert,
                do:
                  JS.transition({"ease-out duration-500", "bg-violet-200", "bg-transparent"},
                    time: 600
                  )
            }
          >
            <div class="relative p-0 pl-3">
              <.input
                checked={todo.completed}
                value="1"
                name={"todo_completed_#{todo.id}"}
                type="checkbox"
                phx-click={JS.push("toggle-completed", value: %{id: todo.id})}
                class=" hover:cursor-pointer"
              />
            </div>
            <div class="_min-w-4">
              <span class="font-mono text-xs text-slate-400">
                <%= todo.id |> to_string() |> String.pad_leading(3, " ") %>
              </span>
            </div>
            <div class="grow" phx-click={JS.push("toggle-completed", value: %{id: todo.id})}>
              <.todo_description todo={todo} />
            </div>
            <div>
              <.button
                phx-click={JS.push("delete", value: %{id: todo.id})}
                data-confirm="Delete Todo?"
                class="bg-transparent text-zinc-400 hover:text-white hover:bg-violet-400"
              >
                <!-- https://mynaui.com/icons -->
                <svg
                  width="24"
                  height="24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="1.5"
                  viewBox="0 0 24 24"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path d="m18 9-.84 8.398c-.127 1.273-.19 1.909-.48 2.39a2.5 2.5 0 0 1-1.075.973C15.098 21 14.46 21 13.18 21h-2.36c-1.279 0-1.918 0-2.425-.24a2.5 2.5 0 0 1-1.076-.973c-.288-.48-.352-1.116-.48-2.389L6 9m7.5 6.5v-5m-3 5v-5m-6-4h4.615m0 0 .386-2.672c.112-.486.516-.828.98-.828h3.038c.464 0 .867.342.98.828l.386 2.672m-5.77 0h5.77m0 0H19.5">
                  </path>
                </svg>
              </.button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
